/**
 * Created by Freeman on 2016/8/8.
 */
import React, {Component, PropTypes} from 'react'
import {Link} from 'react-router'
import {Dropdown} from 'react-bootstrap'
import TimeAgo from 'react-timeago'
import zhStrings from 'react-timeago/lib/language-strings/zh-CN'
import buildFormatter from 'react-timeago/lib/formatters/buildFormatter'

const formatter = buildFormatter(zhStrings);


class Articles extends Component {

    constructor(props) {
        super(props)
        this.noContent = false
    }

    componentDidUpdate(prevProps) {
        const {articleList} = prevProps;
        if (articleList.length > 0) {
            this.noContent = true
        }
    }

    render() {

        const {articleList,isEdit,removeArticle} = this.props;
        return (

            <ul className="article-list list-unstyled clearfix">
                {
                    articleList.map((article, i) =>
                        <li className="article-item" key={i}>
                            <div>
                                <p className="list-top">
                                    <a className="author-name blue-link"
                                       target="_blank">{article.author_id.nickname}</a>
                                    <em>·</em>
                                    <span className="time">
                                            <TimeAgo date={article.publish_time} formatter={formatter}/></span>
                                </p>
                                <h4 className="title">
                                    <Link to={'/article/' + article._id } className="link-title">{article.title}</Link>
                                    {
                                        isEdit?
                                            <Dropdown id="dropdown-setting">
                                                <Dropdown.Toggle className="pull-right" noCaret bsSize="small" bsStyle="link" >
                                                    <i className="fa fa-gear"></i>
                                                </Dropdown.Toggle>
                                                <Dropdown.Menu className="dropdown-menu">
                                                    <li>
                                                        <Link to={'/writerEdit/'+article._id}><i className="fa fa-cog"></i> 编辑文章</Link>
                                                    </li>
                                                    <li className="divider"></li>
                                                    <li>
                                                        <a href="javascript:;" className="shrink-logout" onClick={e => removeArticle(e,article._id)}>
                                                            <i className="fa fa-trash-o"></i> 删除文章
                                                        </a>
                                                    </li>
                                                </Dropdown.Menu>
                                            </Dropdown>
                                            :''
                                    }
                                </h4>
                                <div className="list-footer">
                                    <span>阅读 {article.visit_count}</span>
                                    <span> · 评论 {article.comment_count}</span>
                                    <span> · 喜欢 {article.like_count}</span>
                                </div>
                            </div>
                        </li>
                    )
                }
                {articleList.length < 1 && this.noContent && <li className="no-content">暂无数据...</li>}


            </ul>
        )

    }

}

Articles.propTypes = {
    articleList: PropTypes.array.isRequired,
    isEdit:PropTypes.bool.isRequired,
    removeArticle:PropTypes.func.isRequired
};

export default Articles;